<template>
  <div>
    <div
      class="platform-frame-header-right"
      v-ns-class>
      <div
        class="platform-frame-theme"
        v-ns-class>
        <el-switch
          v-model="theme.isDark.value"
          inline-prompt
          :inactive-icon="Sunny"
          :active-icon="Moon" />
      </div>
      <div
        class="platform-frame-admin"
        v-ns-class
        @click="updateUserInfo()"
        v-if="adminInfo">
        <el-avatar :src="adminInfo.userInfo.avatar" />
        <span
          class="ml-sm"
          v-ns-class>
          {{ adminInfo.userInfo.name }}
        </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useAdminInfo } from '../frame.service'
import { useTheme } from '@/service/theme.service'
import { Moon, Sunny } from '@element-plus/icons-vue'
import { useQiankun } from '@/service/qiankun.service'

export default defineComponent({
  name: 'pl-frame-header',
  setup() {
    const { adminInfo } = useAdminInfo()
    const theme = useTheme()
    const qk = useQiankun()

    const updateUserInfo = () => {
      qk.qiankunFrame.setState({
        userInfo: {
          ...adminInfo.value.userInfo,
          name: '张三',
        },
      })
    }

    return {
      adminInfo,
      updateUserInfo,
      theme,
      Moon,
      Sunny,
    }
  },
})
</script>
<style lang="scss">
.#{getNS('platform-frame-admin')} {
  color: getElVar(color-primary);
}
</style>
